<template>
    <view class="container" style="font-size: 42rpx">
        <image class="background-image" src="/static/images/index/start.png" />
        <view style="bottom: 20vh; left: 0px; border-radius: 20rpx; color: #fe0101" class="fs-lg p-absolute text-white full-width col flex-center pt-xl">
            <view v-if="!lang" class="button text-center my-sm text-white" style="background: #162479; width: 46vw; max-width: 350rpx; border-radius: 40rpx; padding: 20rpx 0" @click="switchLang('ug')">ئۇيغۇرچە</view>
            <view v-if="!lang" class="button text-center my-sm fw-bold" style="box-shadow: 0px 0px 15px 0px #455ef75c;background: #fff; width: 46vw; max-width: 350rpx; border-radius: 40rpx; color: #455EF7; padding: 20rpx 0" @click="switchLang('zh')">中文</view>
        </view>
        <view class="p-absolute fs-sm" style="bottom: 3vh">V{{ version }}</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isLogined: false,
            lang: 'ug',
            version: uni.getSystemInfoSync().appVersion,
        }
    },
    created() {},
    mounted() {},
    onReady() {},
    onLoad(e) {
        console.log('start>index::', e)
        if (e.parent_id) uni.setStorageSync('parent_id', e.parent_id)
        if (e.type) uni.setStorageSync('type', e.type)

        // if (e && e.isLogined) {
        //     this.isLogined = e.isLogined
        // } else {
        setTimeout(() => {
            if (this.lang) {
                uni.switchTab({
                    url: '/pages/index/index',
                })
            }
        }, 1500)
        // }
    },
    onShow() {
        this.lang = uni.getStorageSync('lang')
        uni.hideTabBar({
            success: () => {},
            fail: () => {},
        })
    },
    methods: {
        switchLang(key) {
            this._i18n.locale = key
            uni.setStorageSync('lang', key)
            uni.switchTab({
                url: '/pages/index/index',
            })
        },
    },
}
</script>
<style scoped lang="scss">
.container {
    width: 100vw; /* 100% viewport width */
    height: 100vh; /* 100% viewport height */
    max-width: 1024px;
    display: flex;
    justify-content: center;
    align-items: center;

    .background-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
.blink {
    animation: blink 1s ease 1;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;
    }
}
</style>
